<template>
  <div id="test_app">
    <!--echarts的容器-->
    <!-- 放图表 -->
    <div class="echarts" ref="main" style="width: 100%;height: 400px;background:#fff"></div>
  </div>
</template>
   
  <script>
import { Devicehistory } from "../../../request/api";

export default {
  props: ["oneNums"],
  name: "",
  data() {
    return {
      charts: "",
      allData: [], //后端数据
      opinionData: [] //数据
    };
  },
  methods: {
    drawLine() {
      this.charts = this.$echarts.init(this.$refs.main,'dark');

      let initOptions = {
        title: {
          left: "3%",
          top: "5%",
          text: "设备每日在线数量展示" //标题文本，支持使用 \n 换行。
        },
        // 提示
        tooltip: {
          show: true,
          trigger: "axis",
          axisPoint: {
            type: "shadow"
          },
          formatter: function (params) {
           var html=params[0].name+"<br>";
            for(var i=0;i<params.length;i++){
            	html+= params[i].marker+ params[i].seriesName+":"+params[i].value;
                if(initOptions.series[params[i].seriesIndex].valueType=="percent"){
                    html+="%";
                }
            }
            return html+"<br>";
        }

        },

        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
          data: ["在线数量", "离线数量", "在线率"]
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        // 右上选项
        toolbox: {
          feature: {
            // saveAsImage: {}, //保存为图片
            magicType: { type: ["line", "bar"] }
          }
        },
        // x轴
        xAxis: {
          // name:'日期',
          type: "category",
          boundaryGap: true,
          boundaryGap: ["0", "0.5"],
          axisTick: {
            alignWithLabel: true //保证刻度线和标签对齐
          },
          data: [] //x坐标的名称
        },
        // y轴
        yAxis: [
          {
            name: "数量",
            type: "value",
            yAxisIndex: 0,
            boundaryGap: true,
            boundaryGap: ["0", "0.5"]
            // splitNumber: 5, //纵坐标数
            // interval: 100 //强制设置坐标轴分割间隔
          },
          {
            name: "在线率",
            type: "value",
            position: "right",
            yAxisIndex: 1,
            max: 100,
            boundaryGap: true,
            boundaryGap: ["0", "0.5"],
            axisLabel: {
              show: true,
              interval: "auto", //居中显示
              formatter: "{value} %" //以百分比显示
            }
          }
        ],

        series: [
          {
            name: "在线数量",
            type: "line", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            itemStyle: {
              color: "rgb(111,201,26)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(111,201,26)" //改变折线颜色
              }
            },
            data: this.opinionData
          },
          {
            name: "离线数量",
            type: "bar", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: this.opinionData
          },
          {
            name: "在线率",
            type: "bar", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            valueType:"percent",
            data: this.opinionData
          }
        ]
      };
      // 绘制基础图表
      this.charts.setOption(initOptions);
    },
    getData(num) {
      let obj = { timeLength: 0 };
      if (num) {
        obj.timeLength = num;
      } else {
        obj.timeLength = 7;
      }
      Devicehistory(obj).then(d => {
        this.allData = d.data;
        //根据业务继续完善图表
        this.setEcharts();
        // console.log(d, "d");
      });
    },
    // 根据业务完善图表
    setEcharts() {
      // 1.组装类目数据和系列数据
      // reverse()：对数组进行倒序
      let cateData = this.allData.onlineQuantity.map(item => item.logTime);
      cateData = cateData.reverse();
      let serData = this.allData.onlineQuantity.map(item => item.logValue);
      serData = serData.reverse();
      let serData2 = this.allData.notOnlineQuantity.map(item => item.logValue);
      serData2 = serData2.reverse();

      this.allData.onlineRate.map(item => {
        item.logValue = Number(item.logValue).toFixed(2) * 100;
      });
      let serData3 = this.allData.onlineRate.map(item => item.logValue);

      serData3 = serData3.reverse();
      //  设置图标绘制项
      let setOptions = {
        xAxis: {
          data: cateData
        },
        // 图表类型
        series: [
          {
            name: "在线数量",
            data: serData,
            smooth: true,
            type: "line"
          },
          {
            name: "离线数量",
            data: serData2,
            smooth: true,
            type: "line",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)" //改变折线颜色
              }
            }
          },
          {
            name: "在线率",
            yAxisIndex: 1,
            data: serData3,
            smooth: true,
            type: "line",            
            
          }
        ]
      };

      // setOption 合并多次的绘图配置项 完善图表
      this.charts.setOption(setOptions);
    },

    // 窗口适配方法
    adapTive() {
      // 图标适配
      this.charts.resize();
    }
  },
  //调用
  mounted() {
    // 获取数据
    this.getData();
    this.drawLine();
    //监听窗口变化实现图表自适应
    window.addEventListener("resize", this.adapTive);
    //调用适配方法
    this.adapTive();
  }
};
</script>
   
  <style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>